<template>
  <div class="intelligentize">
    <el-card class="intelligentize-card" shadow="hover" v-for="item in listData" :key="item.id" >
      <div slot="header" class="clearfix">
        <el-image
          style="width: 20px; height: 20px"
          :src="item.icon"
        ></el-image>
        <span>{{ item.label }}</span>
        <el-button class="btn-goto" @click="createPage(item.url)">前往</el-button>
      </div>
      <div>
        {{ item.des }}
      </div>
    </el-card>
    <!-- <a
      :href="item.url"
    >
    {{ item.label }}</a> -->
  </div>
</template>

<script>
import { listData } from './data'
export default {
  name: "Office",
  data() {
    return {
      listData,
    }
  },
  methods: {
    createPage(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.intelligentize {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  cursor: pointer;
  &-card {
    width: 45%;
    margin-top: 20px;
    .clearfix {
      position: relative;
      font-size: 24px;
      .btn-goto {
        position: absolute;
        right: 10px;
        top: -5px;
      }
      span {
        margin: 0 5px;
      }
    }
  }
}
</style>
